<template>
    <div class="page full">
        <div class="top flex">
            <div class="search-box">
                <div class="search">
                    <span>审核状态</span>
                    <el-select v-model="status" placeholder="请选择审核状态" @change="search" clearable>
                        <el-option label="待审核" value="1" />
                        <el-option label="审核通过" value="2" />
                        <el-option label="审核驳回" value="3" />
                    </el-select>
                </div>
                <div  class="search">
                    <span>品类名称</span>
                    <el-input v-model="type" placeholder="按品类名称名称模糊搜索"  @keyup.enter="search">
                    </el-input>
                </div>
                <div class="flex">
                    <ElButton @click="search">搜索</ElButton>
                    <ElButton @click="resetSearch">重置</ElButton>
                </div>
            </div>
        </div>
        <div class="center">
            <List ref="list"></List>
        </div>
        <div class="bottom flex">
            <div class="select-box flex">
            </div>
            <div class="pagination-box">
                <ElPagination 
                v-model:current-page="pagination.current" 
                v-model:page-size="pagination.size" 
                :total="pagination.total" 
                background 
                @change="paginationChange">
            </ElPagination>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import List from './List.vue';

const list = ref<any>();
const status = ref('');
const type = ref('');
const pagination = reactive({
    size: 10,
    current: 1,
    total: 0
});

const getData = async (data?: any) => {
    const total = await list.value?.refresh(data);
    pagination.total = total || 0;
};

const search = async () => {
    pagination.current = 1;
    getData({ status: status.value, type: type.value, current: pagination.current });
};

const resetSearch = () => {
    status.value = '';
    type.value = '';
    pagination.current = 1;
    getData({ status: status.value, type: type.value, current: 1, size: 10 });
};

const paginationChange = (currentPage: number) => {
    getData({ current: currentPage });
};

onMounted(() => {
    getData();
});
</script>

<style scoped>
.top {
    height: 32px;
    justify-content: space-between;
    margin-bottom: 16px;
}

.search-box {
    display: flex;
    justify-content: flex-end; 
    align-items: center; 
    height: 100%;
    width: 100%;
    text-align: center;
    gap: 12px;
}

.search{
    display: flex;
    justify-content: center; 
    align-items: center; 
    width: 320px;
    gap: 12px;
}

.search span {
    width: 80px;
}

.center {
    max-height: calc(100% - 96px);
}

.bottom {
    height: 32px;
    justify-content: space-between;
    margin-top: 16px;
}

</style>
